<template>
  <div>
    <el-form inline>
      <el-form-item label="分类">
        <category-tree-cascader @category-lowest-level-change="categoryIdChanged"
                                ref="categoryTreeCascaderRef"></category-tree-cascader>
      </el-form-item>

      <el-form-item label="品牌">
        <el-select
          v-model="searchSpuInfo.brandId"
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="searchBrandByBrandNameHandler"
          :loading="loading">
          <el-option
            v-for="item in brandList"
            :key="item.brandId"
            :label="item.name"
            :value="item.brandId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="状态">
        <el-select v-model="searchSpuInfo.publishStatus" placeholder="请选择状态">
          <el-option
            v-for="item in productStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="spu名称">
        <el-input v-model="searchSpuInfo.spuName"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="clearSearchingCondition">清空条件</el-button>
      </el-form-item>

      <el-form-item>
        <el-button @click="search" type="success">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      ref="multipleTable"
      :data="spuList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <!--
      brandId: 114
      brandName: "apple"
      catalogId: 225
      categoryName: "手机"
      createTime: "2020-09-29T07:16:51.000+0000"
      id: 1
      publishStatus: 1
      spuDescription: "苹果手机"
      spuName: "iphone11手机"
      updateTime: "2020-09-29T07:16:51.000+0000"
      weight: 0.5
      -->
      <el-table-column label="spu id" width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="分类" width="100">
        <template slot-scope="slot">
          <span>{{ slot.row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品牌" width="100">
        <template slot-scope="slot">
          <span>{{ slot.row.brandName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="spu名" width="120">
        <template slot-scope="slot">
          <span>{{ slot.row.spuName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="spu描述" width="120">
        <template slot-scope="slot">
          <span>{{ slot.row.spuDescription }}</span>
        </template>
      </el-table-column>

      <el-table-column label="质量/kg" width="100">
        <template slot-scope="slot">
          <span>{{ slot.row.weight }}</span>
        </template>
      </el-table-column>

      <el-table-column label="上架状态" width="100">
        <template slot-scope="slot">
          <el-tag v-if="slot.row.publishStatus===0" type="primary">{{ productStatus[slot.row.publishStatus].label }}
          </el-tag>
          <el-tag v-if="slot.row.publishStatus===1" type="success">{{ productStatus[slot.row.publishStatus].label }}
          </el-tag>
          <el-tag v-if="slot.row.publishStatus===2" type="info">{{ productStatus[slot.row.publishStatus].label }}
          </el-tag>
        </template>
      </el-table-column>

      <!--<el-table-column label="创建日期" width="170">
        <template slot-scope="slot">
          <span>{{slot.row.createTime}}</span>
        </template>
      </el-table-column>-->

      <el-table-column label="更新日期" width="170">
        <template slot-scope="slot">
          <span>{{ slot.row.updateTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="slot">

          <!--          <el-button type="text" v-if="slot.row.publishStatus != 1">上架</el-button>-->

          <el-popover
            placement="right"
            trigger="click">
            <el-select v-model="slot.row.publishStatus" placeholder="请选择" @change="updateSpuStatus(slot.row)">
              <el-option
                v-for="item in productStatus"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button slot="reference" type="text">更改上架状态</el-button>
          </el-popover>

          <el-button type="text" @click="editAttr(slot.row.id)">规格</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    修改规格对话框-->
    <el-dialog title="修改规格" :visible.sync="dialogFormVisible" width="80%" @close="dialogClose">
      <spu-attr-value ref="spuAttrValueRef"></spu-attr-value>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmUpdateAttrValue">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import categoryTreeCascader from '../common/categoryTreeCascader'
import brandApi from '../../../api/product/brandApi'
import spuApi from '../../../api/product/spuApi'
import productAttrValueApi from '../../../api/product/productAttrValueApi'

export default {
  name: 'spu',
  components: {
    categoryTreeCascader,
    'spu-attr-value': () => import('./spuAddComponent/spuAttrValue')
  },
  data () {
    return {

      brandList: [],
      loading: false,
      productStatus: [{
        value: 0,
        label: '新建'
      }, {
        value: 1,
        label: '上架'
      }, {
        value: 2,
        label: '下架'
      }],
      searchSpuInfo: {
        catelogId: null,
        brandId: null,
        publishStatus: null,
        spuName: null,
      },
      searchBrand: {
        name: null,
        categoryId: null
      },
      currentIndex: 1,
      size: 10,
      totalCount: 0,
      totalPage: 0,
      spuList: [],
      dialogFormVisible: false,
      spuInfoId: null,
    }
  },
  methods: {
    async searchBrandByBrandNameHandler (brandName) {
      this.searchBrand.name = brandName
      console.log('用户要搜索的品牌名字是', brandName)
      this.loading = true
      let p = await brandApi.getBrandByCategoryIdOrBrandName(null, this.searchBrand.name)
      this.brandList = p.data.list
      this.loading = false
    },
    async categoryIdChanged (categoryId) {
      this.searchSpuInfo.catalogId = categoryId
      this.searchBrand.categoryId = categoryId
      let p = await brandApi.getBrandByCategoryIdOrBrandName(categoryId, null)
      this.brandList = p.data.list
      console.log(this.brandList)
    },
    async search () {
      let p = await spuApi.searchSpuByCondition(this.searchSpuInfo, this.currentIndex, this.size)
      console.log(p.data.page.list)
      this.spuList = p.data.page.list
      this.totalCount = p.data.page.totalCount
      this.totalPage = p.data.page.totalPage
    },
    handleSelectionChange () {

    },
    async updateSpuStatus (row) {
      console.log(row)
      let p = await spuApi.update(row.id, row.publishStatus)
      this.$message({
        message: `${row.spuName}已更新为${this.productStatus[row.publishStatus].label}状态`,
        type: 'success'
      })
    },
    clearSearchingCondition () {
      this.searchSpuInfo = {
        catelogId: null,
        brandId: null,
        publishStatus: null,
        spuName: null,
      }
      this.$refs.categoryTreeCascaderRef.categoryIdArrayLocal = []

      this.search()
    },

    editAttr (spuInfoId) {
      this.dialogFormVisible = true
      this.spuInfoId = spuInfoId
      this.$nextTick(() => {

        this.$refs.spuAttrValueRef.getAttrGroupAndAttrAndAttrValue(this.spuInfoId)
      })
    },

    async confirmUpdateAttrValue () {
      let attrList = this.$refs.spuAttrValueRef.getAttrGroupVoList()

      // 添加spuId字段
      let attrWithSpuInfoIdList = attrList.map(attr => {

        attr.spuId = this.spuInfoId

        return attr
      })

      console.log('dialog中新增/更新后的value是', attrWithSpuInfoIdList)
      let p = await productAttrValueApi.updateAttrValueList(attrWithSpuInfoIdList)

      let attrNameList = attrList.map(attr => {
        return attr.attrName
      })

      this.$message({
        message: `【${attrNameList.join(',')}】添加/更新成功！`,
        type: 'success'
      })

      this.dialogFormVisible = false
    },
    dialogClose () {
      this.spuInfoId = null
      this.$refs.spuAttrValueRef.attrGroupVoList.length = 0
    }
  },
  mounted () {
    this.search()
  },
  watch: {}
}
</script>

<style scoped>

</style>
